<template>
	<view>
		<view v-for="(item,index) in moreList" :key="index" class="outview">
			<image lazyLoad :src="item.src || item" mode="widthFix" @click="clickfn(item.src || item)"></image>
			<text class="txet-style" align="center" size="30rpx" v-for="(e) in item.text || ''" :key="e">{{e}}</text>
			<!-- #ifndef MP-WEIXIN -->
				<view class="button-style">
				<u-button @click="download(item.src || item)"  type="primary" text="下载图片"></u-button>
				</view>
			<!-- #endif -->
				
		</view>
		<u-loading-icon class="icon" mode="semicircle" :show="iconshow" size="100rpx" color="pink"></u-loading-icon>
		<!-- <u-popup :show="show" mode="center" @close="close">
			<view>
				<image :src="clicksrc" mode="widthFix" class="image"></image>
			</view>
		</u-popup> -->
		<view class="moreimages">
			<u-overlay :show="show" @click="show=false">
				<image :src="clicksrc" mode="widthFix" class="imgstyles"></image>
			</u-overlay>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			let page = 1
			if(option.type !== '中秋节' && option.type !== '端午节' && option.type !== '端午节'  && option.type !== '医师节' &&  option.type !=='情人节' &&option.type !== '春节' &&option.type !== '大理' && option.type !=='重庆' && option.type !=='西藏'){
				page = 2
			}
			uni.$u.http.get("/detailList",{params:{
				type : option.type,
				size : 8,
				page : page
			}}).then(res =>{
				switch (option.type){
					case '中秋节' :
						this.moreList.push(this.list[0]);
						this.moreList.push(...res.data);
						break;
					case '端午节' :
						this.moreList.push(this.list[1]);
						this.moreList.push(...res.data);
						break;
					case '元宵节'  :
						this.moreList.push(this.list[2]);
						this.moreList.push(...res.data);
						break;
					case '医师节' :
						this.moreList.push(this.list[3]);
						this.moreList.push(...res.data);
						break;
					case '情人节' :
						this.moreList.push(this.list[4]);
						this.moreList.push(...res.data);
						break;
					case '春节' :
						this.moreList.push(this.list[5]);
						this.moreList.push(...res.data);
						break;
					case '大理' :
						this.moreList.push(this.list[6]);
						this.moreList.push(...res.data);
						break;
					case '重庆' :
						this.moreList.push(this.list[7]);
						this.moreList.push(...res.data);
						break;
					case '西藏' :
						this.moreList.push(this.list[8]);
						this.moreList.push(...res.data);
						break;
					default:
						this.moreList.push(...res.data);
						break;
				}	
			});
			
		},
		data() {
			return {
				clicksrc:"",
				show : false,
				iconshow:false,
				moreList : [],
				list:[
					{
						src:'https://bpic.588ku.com/back_pic/06/04/41/3160f8d8cecb695.jpg',
						text:['我的思念是圆的,八月中秋的月亮','也是最亮最圆的,无论山多高','海多宽,天涯海角都能看见它。']
					},{
						src:'https://img.zcool.cn/community/01f9775cf46f32a801205e4b5c1cb8.jpg@3000w_1l_0o_100sh.jpg',
						text:['心如糯米,越粘越紧','情如粽叶,越煮越香','快乐如射线般,无限延长。']
					},{
						src:'https://img-u-1.51miz.com/preview/video/00/00/12/12/V-121239-5D4F3523.jpg',
						text:['元宵到,花灯俏,天女散花春光妙','元宵到,社火闹,龙腾师跃乐逍遥','元宵到,汤圆笑,甜甜蜜蜜梦燃烧']
					},{
						src:'https://img.51miz.com/preview/element/00/01/13/69/E-1136987-1F265A97.jpg',
						text:['一袭白衣,是救死扶伤','一脸微笑,是化忧解烦的良方','匆匆脚步,是治病救人的热忱']
					},{
						src:'https://bpic.588ku.com/back_pic/05/99/03/945f22e35ecaaf3.jpg',
						text:['我想买一大堆大白兔奶糖','看见顺眼就给一颗','如果遇到你,我就全部砸在你身上']
					},{
						src:'https://img.zcool.cn/community/01368a5a55f3d5a8012113c79aab10.jpg@1280w_1l_2o_100sh.jpg',
						text:['可爱人间烟火，平安喜乐万朵。','共欢新故岁，迎送一宵中。','满怀上一年的热爱，奔赴下一年的山海。']	
					},{
						src:'https://img.zcool.cn/community/0122475785a7e40000018c1b053465.jpg@1280w_1l_2o_100sh.jpg',
						text:['你不在重庆的日子，我替你吹了嘉陵江的晚风','重庆可以给你各种想象和市井的所有样子.....']
					},{
						src:'https://dimg05.c-ctrip.com/images/fd/tg/g2/M02/8B/A0/CghzgVWw6vCARCuiABjIYsdKcec275.jpg',
						text:['我喜欢安静，徘徊在苍山洱海边,','你喜欢热闹游荡在人山人海中我们像平行线一样','看的到摸不到明知道没有交点却还在等。']
					},{
						src:'https://youimg1.c-ctrip.com/target/100a0u000000ixv0iE7F9.jpg',
						text:['世界之大，西藏拉萨','她却是最高的一座城，也是最远的一座城,','更是最具信仰的一座城。']
					}
				]
			}
		},
		methods: {
			// 点击放大图片
			clickfn(src){
				this.clicksrc = src
				this.show = true
			},
			download(src){
				// 点击下载图片
				// #ifdef H5
				uni.downloadFile({
					url:src,
					success : (res)=> {
						if(res.statusCode  === 200)
						this.saveimg(res.tempFilePath)
					}
				})
				// #endif
			},
			saveimg(url){
				var oA = document.createElement("a");
					oA.download = '';// 设置下载的文件名，默认是'下载'
					oA.href = url;
					document.body.appendChild(oA);
					oA.click();
					oA.remove(); // 下载之后把创建的元素删除
			},
			onPullDownRefresh(){
				// 下拉刷新
				setTimeout(()=>{
					uni.stopPullDownRefresh()
					uni.$u.http.get("/detailList",{params:{
					type : "其他",
					size : 8,
					page : 2
				}}).then((res)=>{
					this.moreList = res.data
				})
				},2000) 
				
			},
			onReachBottom(){
				// 触底加载更多
				
				if(!this.iconshow){
					this.iconshow = true
					setTimeout(()=>{
						uni.$u.http.get("/detailList",{params:{
							type : "其他",
							size : 8,
							page : 2
						}}).then((res)=>{
							this.moreList.push(...res.data)
						})
						this.iconshow = false
					},2000)
				}
			},
			close(){
				// 关闭图片展示窗口
				this.show = false
			}
		  
		}
	}
</script>

<style>
	page {
			background-color: rgba(208, 88, 124, 0.1);
		}
		.txet-style{
			display: block;
			margin-bottom: 10rpx;
			line-height: 40rpx;
			text-align: center;
		}
		image {
			width: 750rpx;
			display: block;
		}
		.imgstyles{
			display: block;
			position: relative;
			top: 50%;
			left: 50%;
			transform: translateY(-50%)  translateX(-50%);
		}
		/* #ifdef MP-WEIXIN */
		.outview{
			margin: 6rpx 0;
		}
		/* #endif */
		.icon {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
		}
</style>
